<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="vue.js" type="text/javascript"></script>
    <script src="jquery.1.8.js" type="text/javascript"></script>
</head>
<body>
        <body style="background-image: url(images/bg.png);background-repeat: no-repeat;background-size: cover;">

            <div  id="app" class="out">
           
             <div class="top">
               Vue实训-注册功能
               <img src="images/1.png"/>
             </div>
           
              <div class="text">
                <input type="text" v-model="loginName" placeholder="用户名"/>
              </div>
           
              <div class="text">
               <input type="text" v-model="pwd" placeholder="密码"/>
              </div>

              <div class="text">
                    <input type="text" v-model="name" placeholder="姓名"/>
                   </div>
           
              <div class="bottom" @click="reg">注册</div> 
           
            </div>
</body>
<script>
        var vm = new Vue({
          el: '#app',
          data: {
            loginName:'',
            pwd:'',
            name:''
          },
          methods: {
              // 定义事件处理方法showInfo
            reg () {
      
              $.ajaxSetup({
                contentType:"application/json;charset=utf-8"
              });
      
              var data= {"loginName":this.loginName,"pwd":this.pwd,"name":this.name}
      
              $.post("http://api.tutestudio.net/api/reg",JSON.stringify(data),function(res){
                if(res.code==200){
                  alert("注册成功")
                  location.href='login.html'
                }else{
                  alert("注册失败")
                }
              
              })
      
            }
            }
            })
        
      </script>
</html>